<template>
    <div class="address">
        <div class="head">
            <van-nav-bar title="地址管理" left-arrow @click-left="onClickLeft" />
        </div>
        <div v-if="isLoaing" class="cart-box">
            <div class="loading">
                <van-loading type="spinner" />
            </div>
        </div>
        <div v-else>
            <van-address-list v-model="chosenAddressId" :list="addresslist.list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { getAddress } from "../../api/index";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

const router = useRouter();
const route = useRoute();

let isLoaing = ref(true);

const chosenAddressId = ref("1");
const list = [
    {
        id: "1",
        name: "张三",
        tel: "13000000000",
        address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
        // isDefault: true,
    },
    {
        id: "2",
        name: "李四",
        tel: "1310000000",
        address: "浙江省杭州市拱墅区莫干山路 50 号",
    },
];
const addresslist = reactive({
    list: [],
});

const onClickLeft = () => history.back();

const onAdd = () => {
    router.push({
        name: "editaddr",
    });
};
const onEdit = (item: any, index: any) => {
    console.log(item);

    router.push({
        name: "editaddr",
        query: {
            id: item.id,
        },
    });
};

getAddress().then((res: any) => {
    let { result } = res;

    let list = [];
    result.forEach((item: any) => {
        let arr: any = {};
        arr.id = item.address_id;
        arr.name = item.address_name;
        arr.tel = item.address_phone;
        arr.address = item.address_province + item.address_city + item.address_county + item.address_detail;
        list.push(arr);
    });
    addresslist.list = list;
    isLoaing.value = false;
});
</script>

<style lang="scss" scoped>
.address {
    position: relative;
    width: 100%;
    .loading {
        text-align: center;
        margin-top: 100px;
    }
}
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
:deep(.van-nav-bar) {
    background: #353535;
}
:deep(.van-nav-bar__title) {
    color: #fff;
    font-weight: normal;
}
:deep(.van-nav-bar .van-icon) {
    color: #fff;
}
:deep(.van-address-item .van-radio__icon--checked .van-icon) {
    background-color: #353535;
    border-color: #353535;
}
:deep(.van-tag--primary) {
    background: #353535;
}
:deep(.van-button--primary) {
    background: #353535;
    border-color: #353535;
}
</style>
